<template>
  <iframe ref="ifr" id="iframe" scrolling="no" src="static/constructionmap/Map.html"></iframe>
</template>
<script lang="ts" setup>
import { store } from '@/components/map/mapStore'
import { onMounted, nextTick, ref } from 'vue'
const ifr = ref()
const emits = defineEmits(['map-click', 'map-load','send-message'])
onMounted(() => {
  nextTick(() => {
    window.addEventListener('message', function (e) {
      if (e.data === 'load') {
        if(ifr.value && ifr.value.contentWindow){
          store.iframe = ifr.value.contentWindow
          store.BNMap = store.iframe.getMap()
          store.BNSymbol = store.iframe.getBNSymbol()
          store.BNGeometry = store.iframe.getBNGeometry()
          store.BNWindows = store.iframe.getBNWindows()
          store.BNRoutePlanning = store.iframe.getBNRoutePlanning()
          store.BNTrackAnimation = store.iframe.getBNTrackAnimation()
          store.BNTrackReplays = store.iframe.getBNTrackReplays()
          store.BNHeatMap = store.iframe.getBNHeatMap()
          store.BASE = store.iframe.getBase()
          // 地图加载完成后，调用加载完成事件
          emits('map-load')
          store.iframe.setClick(null, (evt:any) => {
            emits('map-click', evt)
          })
        }
      }
    })
  })
})
</script>
<style lang="less" scoped>
#iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>
